<template>
  <div class="pledgeDesc hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar
        :title="t('pledge.descNavbar')"
        isTransparent
        :scrollEl="scrollEl"
        :navScorllOffset="30"
        navScorllColor="#FFF"
        isFixed
      />
      <!-- 内容 -->
      <div style="padding-top: 20px">
        <div class="content-bg">
          <!-- 说明内容 -->
          <div
            style="
              border-radius: 12px;
              background-color: #fff;
              padding-bottom: 10px;
            "
          >
            <div class="items-center title">
              <img style="margin-right: 10px" src="/image/mvp/desc/num1.svg" />
              <div style="flex: 1">{{ t("pledge.zyrule") }}</div>
            </div>

            <div v-for="(item, index) in list" :key="index" class="content-box">
              <div class="content-box-img">
                <Images src="/image/assetDetails/desc-logo.svg"></Images>
              </div>
              <div class="text-zw">{{ item }}</div>
            </div>
          </div>
          <!-- 基础利率与上限 -->
          <div class="group" style="margin-top: 10px">
            <!-- 标题 -->
            <div class="items-center group-title">
              <img style="margin-right: 10px" src="/image/mvp/desc/num2.svg" />
              <div style="flex: 1">{{ t("pledge.zycjwt") }}</div>
            </div>
            <!-- 1.什么是 bdc 质押 -->
            <div class="group-zw1">{{ t("pledge.smszy") }}</div>
            <div class="group-zw2" style="margin-bottom: 20px">
              {{ t("pledge.smszyDesc") }}
            </div>
            <!-- 2.什么是年化收益率 -->
            <div class="group-zw1">{{ t("pledge.smsnhsy") }}</div>
            <div class="group-zw2" style="margin-bottom: 20px">
              {{ t("pledge.smsnhsyDesc") }}
            </div>
            <!-- 3 如何查看自己的年化收益率？ -->
            <div class="group-zw1">{{ t("pledge.smsnhsyl") }}</div>
            <div class="group-zw2" style="margin-bottom: 10px">
              {{ t("pledge.smsnhsylDesc") }}
            </div>
            <div class="group-example" style="margin-bottom: 20px">
              <span class="group-example-prefix">{{ t("pledge.ru") }}</span>
              {{ t("pledge.smsnhsylDesc1") }}
            </div>
            <!-- 4 我的年化收益率可以提升吗？ -->
            <div class="group-zw1">{{ t("pledge.sylktsm") }}</div>
            <div class="group-zw2" style="margin-bottom: 20px">
              {{ t("pledge.sylktsmDesc1") }}
            </div>
            <div class="group-zw2" style="margin-bottom: 20px">
              {{ t("pledge.sylktsmDesc2") }}
            </div>
            <!-- 5如何计算收益？-->
            <div class="group-zw1">{{ t("pledge.rhjssy") }}</div>
            <div class="group-zw2" style="margin-bottom: 20px">
              {{ t("pledge.rhjssyDesc1") }}
            </div>
            <div class="group-zw2" style="margin-bottom: 10px">
              {{ t("pledge.rhjssyDesc2") }}
            </div>
            <div class="group-example" style="margin-bottom: 20px">
              <span class="group-example-prefix">{{ t("pledge.ru") }}</span>
              {{ t("pledge.rhjssyDesc3") }}
            </div>
            <!-- 6 基准利率与上限 -->
            <div class="group-zw1">{{ t("pledge.jzlvysx") }}</div>
            <!-- <div class="content-box" style="padding: 0">
              <div class="content-box-img">
                <Images src="/image/assetDetails/desc-logo.svg"></Images>
              </div>
              <div class="text-zw">
                {{ $t("pledge.tableTitle") }}
              </div>
            </div> -->
            <!-- 表格 -->
            <div
              class="items-center group-row-first col-left-radius col-right-radius"
              style="margin-top: 10px"
            >
              <div class="col-first-row col col-first">
                {{ t("pledge.colTitle1") }}
              </div>
              <!-- <div class="col-first-row col col-center">
                {{ t("pledge.colTitle2") }}
              </div> -->
              <DhTooltip
                style="flex: 1"
                :offsetSj="35"
                :offset="0"
                width="170px"
                :styleSlot="{
                  top: '40px',
                }"
                @init-call="(call) => (pageData.tooltip1 = call)"
              >
                <div
                  class="col-first-row col col-center"
                  style="padding: 0 8px"
                  @click.stop="tooltipClick(2)"
                >
                  {{ t("pledge.colTitle2") }}
                </div>

                <template v-slot:content>
                  <div class="col-first-row col col-center tooltipEnd">
                    {{ t("pledge.colTitle2") }}
                  </div>
                </template>
              </DhTooltip>
              <!-- <div class="col-first-row col col-end">
                {{ t("pledge.colTitle3") }}
              </div> -->
              <DhTooltip
                style="flex: 1"
                :offsetSj="35"
                :offset="0"
                width="170px"
                :styleSlot="{
                  top: '40px',
                }"
                @init-call="(call) => (pageData.tooltip = call)"
              >
                <div
                  class="col-first-row col col-end"
                  style="padding: 0 8px"
                  @click.stop="tooltipClick(1)"
                >
                  {{ t("pledge.colTitle3") }}
                </div>
                <template v-slot:content>
                  <div class="col-first-row col col-end tooltipEnd">
                    {{ t("pledge.colTitle3") }}
                  </div>
                </template>
              </DhTooltip>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <!-- <Images
                  style="width: 32px"
                  src="/image/mvp/desc/leve0.svg"
                ></Images> -->
                <span style="margin-left: 10px">VIP0</span>
              </div>
              <div class="col col-center">1.5%</div>
              <div class="col col-end">5%</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <!-- <Images
                  style="width: 32px"
                  src="/image/mvp/desc/leve1.svg"
                ></Images> -->
                <span style="margin-left: 10px">VIP1</span>
              </div>
              <div class="col col-center">5%</div>
              <div class="col col-end">10%</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <!-- <Images
                  style="width: 32px"
                  src="/image/mvp/desc/leve2.svg"
                ></Images> -->
                <span style="margin-left: 10px">VIP2</span>
              </div>
              <div class="col col-center">5.65%</div>
              <div class="col col-end">12%</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <!-- <Images
                  style="width: 32px"
                  src="/image/mvp/desc/leve3.svg"
                ></Images> -->
                <span style="margin-left: 10px">VIP3</span>
              </div>
              <div class="col col-center">6%</div>
              <div class="col col-end">15%</div>
            </div>
            <div
              class="items-center group-col"
              style="
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                overflow: hidden;
                border-bottom-width: 10px;
                padding-bottom: 6px;
              "
            >
              <div
                class="col col-first items-center"
                style="line-height: initial"
              >
                <!-- <Images
                  style="width: 32px"
                  src="/image/mvp/desc/leve4.svg"
                ></Images> -->
                <span style="margin-left: 10px">{{ t("pledge.VIP4jys") }}</span>
              </div>
              <div class="col col-center">6.35%</div>
              <div class="col col-end" style="border-bottom: none">20%</div>
            </div>
            <div class="group-zw2" style="margin-bottom: 20px;margin-top: 10px;">
              {{ t("pledge.jzlvysxDesc1") }}
            </div>
            <div class="group-zw2" style="margin-bottom: 10px">
              {{ t("pledge.jzlvysxDesc2") }}
            </div>
            <div class="group-example" style="margin-bottom: 0px">
              <span class="group-example-prefix">{{ t("pledge.ru") }}</span>
              {{ t("pledge.jzlvysxDesc3") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="pledgeDesc">
import DhTooltip from "../../components/mvp/dh-tooltip.vue";
const { t } = useI18n();
const list = [
  t("pledge.desc2"),
  t("pledge.desc3"),
  t("pledge.desc4"),
  t("pledge.desc5"),
  t("pledge.desc6"),
  t("pledge.desc7"),
  t("pledge.desc8"),
  t("pledge.desc9"),
  t("pledge.desc10"),
];

// 接收滚动事件，传递给导航组件
const scrollEl = ref();

// 页面属性
const pageData = reactive({
  tooltip: {},
  tooltip1: {},
});
//  显示提示
const tooltipClick = (val) => {
  if (val === 1) {
    pageData.tooltip(true);
    pageData.tooltip1(false);
  } else {
    pageData.tooltip(false);
    pageData.tooltip1(true);
  }
};
</script>
<style lang="scss" scoped>
.pledgeDesc {
  position: relative;
  background-color: #f4f5f7;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;

  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;

  .content {
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0.3) 99.93%
    );

    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;
    &-bg {
      margin: 0 15 * 2px;
      border-radius: 12 * 2px;

      padding-bottom: 30px;
    }
    &-box {
      display: flex;
      align-items: flex-start;

      padding: 15 * 2px;
      padding-bottom: 0 * 2px;
      &-img {
        width: 8 * 2px;
        height: 8 * 2px;
        margin-right: 8 * 2px;
        margin-top: 5 * 2px;
      }
    }
  }

  .text {
    &-zw {
      flex: 1;
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
      word-break: break-word;
    }
    &-oneline {
      margin-bottom: 18 * 2px;
    }
  }

  .mb10 {
    margin-bottom: 10 * 2px !important;
  }
}
.group {
  margin-bottom: 10 * 2px;
  padding: 15 * 2px 20 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;
  &-row-first {
    background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
    background-repeat: no-repeat;
    justify-content: space-around;
  }

  &-text {
    color: #141924;
    font-size: 13 * 2px;
    line-height: 18 * 2px; /* 138.462% */
    letter-spacing: -0.4px;
  }
  &-col {
    justify-content: space-around;
    background-color: #f0f7ff;
  }
  .col {
    width: 200px;
    text-align: center;
    color: #141924;
    font-size: 13 * 2px;
    height: 90px;
    line-height: 90px;
    &-rightview {
      margin-left: 20 * 2px;
      &-title {
        font-size: 13 * 2px;
        color: #141924;
        margin-bottom: 8 * 2px;
        line-height: initial;
      }
      &-bottom {
        width: fit-content;
        padding: 2 * 2px 6 * 2px;
        border-radius: 100px;
        background-color: #dfeeff;
      }
      &-icon {
        width: 14 * 2px;
        height: 14 * 2px;
        margin-right: 5 * 2px;
      }
      &-text {
        font-size: 11 * 2px;
        line-height: initial;
        color: #007bff;
      }
    }
    &-yd {
      margin-left: 30 * 2px;
      width: 38 * 2px;
      height: 38 * 2px;
      // background: #007bff;
    }
    &-first-row {
      @include multi-line-omit(1);
      background-color: transparent;
      color: #fff;
      font-weight: 590;
    }
    &-first {
      width: 180px;
      justify-content: center;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-left-radius {
      border-top-left-radius: 24px;
    }
    &-center {
      // border-left: 1px rgba(0, 0, 0, 0.1) solid;
      // border-right: 1px rgba(0, 0, 0, 0.1) solid;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-end {
      width: 173 * 2px;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-right-radius {
      border-top-right-radius: 24px;
    }
  }
  &-title {
    font-size: 30px;
    font-weight: 590;
    color: #141924;
    padding-bottom: 20 * 2px;
  }
  &-zw1 {
    color: #007bff;
    font-size: 14 * 2px;
    font-weight: 590;
    word-break: break-word;
    margin-bottom: 10 * 2px;
    word-break: break-word;
  }
  &-zw2 {
    color: #141924;
    font-size: 13 * 2px;
    word-break: break-word;
    word-break: break-word;
  }
  &-example {
    border-radius: 8 * 2px;
    background: #f6f8fc;
    padding: 10 * 2px;
    font-size: 12 * 2px;
    color: #999da7;
    word-break: break-word;
    &-prefix {
      color: #007bff;
    }
  }
  .desc {
    color: #999da7;
    font-size: 12 * 2px;
    letter-spacing: -0.2px;
    word-break: break-word;
  }
}
.title {
  padding: 15 * 2px 15 * 2px 0 15 * 2px;
  font-size: 30px;
  font-weight: 590;
  color: #141924;
}
.tooltipEnd {
  -webkit-line-clamp: 2 !important;
  -moz-line-clamp: 2 !important;
  line-height: initial !important;
  height: 60px;
  margin-top: 5%;
  margin-left: 5%;
  width: 90% !important;
}
</style>
